<template>
  <div class="login">
    <div class="login-contianer">
      <div class="login-contianer-title">
        <div class="contianer-title-one">
          <div class="title-icon"></div>
          <div class="title-font">数智化智能风控</div>
        </div>
        <div class="contianer-title-two">汽车资产全过程智能赋能与管理平台</div>
      </div>
      <div class="login-input">
        <div class="login-input-user">
          <div class="login-input-tab">
            <div
              :class="ativieLogin == 'ativie-1' ? 'tab-ativie' : 'input-tab'"
              @click="selectLogin('ativie-1')"
            >
              账户密码登录
            </div>
            <div
              :class="ativieLogin == 'ativie-2' ? 'tab-ativie' : 'input-tab'"
              @click="selectLogin('ativie-2')"
            >
              手机号登录
            </div>
          </div>
          <div
            :class="
              ativieLogin == 'ativie-1' ? 'login-pwd' : 'login-display-none'
            "
          >
            <el-input
              v-model="account"
              clearable
              style="width: 300px; height: 40px"
              placeholder="账号"
            />
            <el-input
              v-model="pwd"
              clearable
              style="width: 300px; height: 40px"
              type="password"
              placeholder="密码"
              show-password
            />
          </div>
          <div
            :class="
              ativieLogin == 'ativie-2' ? 'login-cap' : 'login-display-none'
            "
          >
            <el-input
              v-model="account"
              clearable
              style="width: 300px; height: 40px"
              placeholder="手机号"
            />
            <div style="display: flex; gap: 10px">
              <el-input
                v-model="pwd"
                clearable
                style="width: 200px; height: 40px"
                placeholder="验证码"
                show-password
              />

              <button
                :disabled="isDisabled"
                @click="startCountdown"
                style="width: 90px; height: 36px"
              >
                {{ buttonText }}
              </button>
            </div>
          </div>
        </div>

        <el-button
          type="primary"
          @click="login"
          style="background-color: red; border: none"
          >登录</el-button
        >
      </div>
      <div class="login-copyright">
        copyright©正四面体(南京)数字科技有限公司
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";
import { ElMessage } from "element-plus";
import { useRouter } from "vue-router"; // 引入useRouter函数
import { Md5 } from "ts-md5";
import http from "@/request/request";

//---------------------变量定义----------//
const router = useRouter(); // 获取路由实例
// 账号
const account = ref<string>("");
// 密码
const pwd = ref<string>("");
// 登陆方式选择
const ativieLogin = ref<string>("ativie-1");

const timeLeft = ref(60); // 倒计时时间，单位秒
const isDisabled = ref(false); // 按钮是否禁用
const buttonText = ref("获取验证码"); // 按钮文字

//---------------------方法定义----------//
const login = async () => {
  if (!account.value || !pwd.value) {
    ElMessage.error("账号或密码未输入");
    return;
  }
  //如果是手机号验证码登陆
  if (ativieLogin.value === "ativie-2") {
    const params = {
      phone: account.value,
      password: pwd.value,
    };
    try {
      const { data } = await http.post<string>(
        "/api/user/loginByCaptcha",
        params
      );
      localStorage.setItem("token", data);
      router.replace("/");
    } catch (error) {
      console.log(error);
    }
    return;
  }
  // 调用登录接口，获取token，将token存储到本地，然后跳转到首页
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  const md5: any = new Md5();
  md5.appendAsciiStr(pwd.value);
  const passwordMD5 = md5.end();

  const params = {
    phone: account.value,
    password: passwordMD5,
  };
  try {
    const { data } = await http.post<string>("/api/user/login", params);
    localStorage.setItem("token", data);
    router.replace("/");
  } catch (error) {
    console.log(error);
  }
};
const selectLogin = (select: string) => {
  ativieLogin.value = select;
};
// 请求发送验证码，并倒计时
const startCountdown = () => {
  if (!isDisabled.value) {
    // 发送验证码
    if (!account.value) {
      ElMessage.error("请输入手机号");
      return;
    }
    http
      .post<string>("/api/user/sendCaptcha?mobile=" + account.value)
      .catch((err) => {
        console.log(err);
      });

    isDisabled.value = true;
    buttonText.value = "60秒后重试";
    let interval = setInterval(() => {
      timeLeft.value--;
      if (timeLeft.value === 0) {
        clearInterval(interval);
      }
    }, 1000);
  }
};

watch(timeLeft, (newVal) => {
  if (newVal === 0) {
    isDisabled.value = false;
    buttonText.value = "获取验证码";
    timeLeft.value = 60; // 重置倒计时时间
  } else if (newVal != 60) {
    buttonText.value = `${newVal}秒后重试`;
  }
});
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100%;
  background-image: url("../assets/27ea893889f79fdd770ae0ec6d6fd862.png");
  background-size: cover;
  background-position: center;

  .login-contianer {
    width: 400px;
    height: 580px;
    background-color: rgba(255, 255, 255, 0.9);
    position: absolute;
    left: 70%;
    top: 20%;
    .contianer-title-one {
      display: flex;
      gap: 4px;
      margin-left: 24%;
      margin-top: 10%;

      .title-icon {
        width: 40px;
        height: 40px;
        background-image: url("../assets/login-icon2.png");
        background-size: 100%;
      }
      .title-font {
        font-size: 24px;
        font-weight: 900;
        line-height: 40px;
      }
    }
    .contianer-title-two {
      color: #000;
      font-size: 12px;
      margin-top: 14px;
    }
    .login-input {
      display: flex;
      flex-direction: column;
      margin-top: 20%;
      width: 350px;
      gap: 20px;
      .el-input,
      .el-button {
        margin-left: 14%;
      }

      .login-pwd,
      .login-cap {
        display: flex;
        flex-direction: column;
        gap: 20px;
      }
      .login-input-tab {
        display: flex;
        gap: 50px;
        margin-left: 14%;
        margin-bottom: 20px;

        .input-tab {
          width: 50%;
          height: 30px;
          cursor: pointer;
        }
        .tab-ativie {
          cursor: pointer;
          width: 50%;
          height: 30px;
          border-bottom: 2px saddlebrown solid;
        }
      }
      .login-display-none {
        display: none;
      }
    }
    .login-copyright {
      color: darkgrey;
      font-size: 12px;
      margin-top: 40%;
    }
  }

  .el-alert {
    margin: 20px 0 0;
  }
  .el-alert:first-child {
    margin: 0;
  }
}
</style>